<template>
  <view class="warp">
    <c-navBar title="领券中心" is-tran></c-navBar>
    <view class="content">
      <c-scroll-list ref="list" :api="api" :apiParams="apiParams" @load="load">
        <view
          class="activity-box"
          v-for="(item, index) in activityList"
          :key="index"
          @click="goDetails(item.id)"
        >
          <view class="activity-boxLeft">
            <image
              :src="item.cover"
              style="width: 160rpx; height: 160rpx"
              mode=""
            ></image>
            <view :class="item.status == 1 ? 'after-left' : 'after-left1'">
              {{ item.status == 1 ? "报名中" : "已结束" }}
            </view>
            <!-- <view class="after-left">
							报名中
						</view> -->
          </view>
          <view class="activity-boxRight">
            <p class="boxRight1">{{ item.title }}</p>
            <view
              class="boxRight2"
              style="box-sizing: border-box; padding-top: 24rpx"
            >
              <image
                style="width: 18rpx; height: 18rpx"
                src="../static/time-icon.png"
                mode=""
              ></image>
              <p>
                {{
                  item.activityTime ? item.activityTime.substring(0, 10) : ""
                }}
              </p>
            </view>
            <view
              class="boxRight2"
              style="box-sizing: border-box; padding-top: 12rpx"
            >
              <image
                style="width: 18rpx; height: 18rpx"
                src="../static/address-icon.png"
                mode=""
              ></image>
              <p>{{ item.address }}</p>
            </view>
            <view class="boxRight3">
              <text
                style="font-weight: bold; font-size: 30rpx; color: #1a1a1a"
                >{{ item.userNum }}</text
              >/{{ item.stock }}人报名
            </view>
          </view>
        </view>
      </c-scroll-list>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      apiParams: {
        userId: uni.getStorageSync("user").userId,
      }, //这是接口参数
      api: this.$api.activityList,
      activityList: [], //活动列表
    };
  },
  onLoad() {
    console.log(uni.getStorageSync("user").userId, "用户信息");
  },
  onShow() {
    this.$refs.list.refresh();
  },
  methods: {
    // 活动列表
    load(res) {
      this.activityList = res.list;
      console.log("活动列表", res);
    },
    // 活动详情
    goDetails(id) {
      uni.navigateTo({
        url: `/pages/my/pages/activityDetails?id=${id}&&type=1`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.warp {
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
  padding-top: 200rpx;
  box-sizing: border-box;
}

.content {
  width: 100%;
  height: calc(100vh - 150rpx);

  .activity-box {
    width: 686rpx;
    // height: 208rpx;
    padding: 24rpx 0rpx;
    margin: 0 auto;
    border-bottom: 1rpx solid #e6e6e6;
    display: flex;
    box-sizing: border-box;
    // justify-content: space-between;

    .activity-boxLeft {
      width: 160rpx;
      // height: 160rpx;
      border-radius: 12rpx 0rpx 0rpx 0rpx;
      // background-color: hotpink;
      position: relative;

      .after-left {
        width: 88rpx;
        height: 36rpx;
        background: #329cfa;
        border-radius: 12rpx 0rpx 12rpx 0rpx;
        font-size: 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0rpx;
        left: 0rpx;
      }

      .after-left1 {
        width: 88rpx;
        height: 36rpx;
        background: #ff6d4d;
        border-radius: 12rpx 0rpx 12rpx 0rpx;
        font-size: 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0rpx;
        left: 0rpx;
      }
    }

    .activity-boxRight {
      margin-left: 28rpx;

      .boxRight1 {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #1a1a1a;
        overflow: hidden;
        word-break: break-all;
        /* 允许在单词内换行 */
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
        display: -webkit-box;
        /* 将对象作为伸缩盒子模型显示 */
        -webkit-box-orient: vertical;
        /* 设置或检索伸缩盒对象的子元素的排列方式，纵向 */
        -webkit-line-clamp: 1;
        /* 显示的行数 */
      }

      .boxRight2 {
        width: 100%;
        height: 20rpx;
        font-size: 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #666666;
        display: flex;
        align-items: center;

        p {
          margin-left: 8rpx;
        }
      }

      .boxRight3 {
        width: 500rpx;
        height: 28rpx;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        color: #666666;
        padding-top: 24rpx;
        box-sizing: border-box;
        text-align: right;
      }
    }
  }
}
</style>
